<template>
  <div class="task-details">
    <div class="share-details-top">
      <div :style="{height: statusBarHeight + 'px'}"></div>
      <div class="share-details-title posre"
           :style="{height: navHeight+'px'}">
           <div class="goBack" @click="goBack()">
             <image class="icon-back" :src="imgUrl" mode=""></image>
           </div>

           <p class="navgation-title fs18 fbold cfff">{{title}}</p>

           <p></p>
      </div>
      <div class="middle" :style="{'background-image':'url('+cardImgUrl+')'}">
        <div class="middle-title">
           {{taskdetail.taskName}}
        </div>
        <div class="middle-centent">
          <div class="time">
            <div class="time-left">
              <div class="time-axis">
                <div class="dots-box">
                  <div class="dots">
                    <span class="bblue4"></span>
                    <p>至</p>
                    <span class="byellow4"></span>
                  </div>
                  <div class="time-line"></div>
                </div>
              </div>
              <div class="data">
                <p>{{taskdetail.startTime}}</p>
                <p>{{taskdetail.endTime}}</p>
              </div>
            </div>
          </div>
          <div class="target">
            <div class="target-title">
              <span></span>
              <p class="c38 fs14 ml7">任务情况</p>
            </div>
            <ul>
              <li>
                <div class="target-box bblue">
                  <image class="w10 h8 mr3" :src="eyeImg"></image>
                  <p class="cblue fs10">已查看</p>
                </div>
                <p class="fs14"><span class="cblue">{{taskdetail.seeViewed}}</span>/{{taskdetail.sumNum}}</p>
              </li>
              <li>
                <div class="target-box bgreen">
                  <image class="w10 h10 mr3" :src="undone"></image>
                  <p class="cgreen fs10">未完成</p>
                </div>
                <p class="fs14"><span class="cgreen">{{taskdetail.sumNum - taskdetail.completed}}</span>/{{taskdetail.sumNum}}</p>
              </li>
              <li>
                <div class="target-box byellow">
                  <image class="w10 h10 mr3" :src="finishImg"></image>
                  <p class="cyellow fs10">已完成</p>
                </div>
                <p class="fs14"><span class="cyellow">{{taskdetail.completed}}</span>/{{taskdetail.sumNum}}</p>
              </li>
            </ul>
          </div>
          <div class="share-records-bottom" v-if="taskdetail.state == 0">
            <div class="time-data">距离结束
             <span>{{taskdetail.time.day}}</span>天
             <span>{{taskdetail.time.hour}}</span>时
             <span>{{taskdetail.time.minute}}</span>分
             <span>{{taskdetail.time.second}}</span>秒
            </div>
            <p class="cblue fs14">进行中</p>
          </div>
          <div class="share-records-bottoma" v-else>
            {{taskdetail.state}}
          </div>
        </div>
      </div>
    </div>
    <div class="task-finish">
      <p class="fs20 c38 fbold">我的完成情况<span class="cblue ml6 fs14 fnormal">FINISH</span></p>
    </div>
    <div class="task-tabber">
      <ul>
        <li v-for="item in tabber" :key="item.tag" @click="select_tag(item)">
          <p :class="{'cblue': item.isSelect}">{{item.name}}</p>
          <span v-if="item.isSelect"></span>
        </li>
      </ul>
      <div class="list-state" v-if="isShow == 'notViewed'">
        <div class="list" v-for="item in taskNotViewed" :keiy="item.shareNum">
          <image class="w50 h50 bradius5" :src="item.avatarUrl"></image>
          <div class="information ml10 pt5">
            <div class="information-left">
              <p class="fs16 c18">{{item.nickeName}}</p>
              <p class="fs14 c78">{{item.position}}</p>
            </div>

          </div>
        </div>
      </div>
      <div class="list-state" v-if="isShow == 'incomplete'">
        <div class="list" v-for="item in taskComplete" :keiy="item.shareNum">
          <image class="w50 h50 bradius5" :src="item.avatarUrl"></image>
          <div class="information ml10 pt5">
            <div class="information-left">
              <p class="fs16c18">{{item.nickeName}}</p>
              <p class="fs14 c78">{{item.position}}</p>
            </div>
            <div class="information-right">
              <p class="ca8 fs12">文章分享次数<span class="c38 fs12">{{item.shareNum}}</span>/{{taskdetail.shareNum}}</p>
              <p class="ca8 fs12">新增访客人数<span class="c38 fs12">{{item.visitNum}}</span>/{{taskdetail.visitNum}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="list-state" v-if="isShow == 'completed'">
        <div class="list" v-for="item in taskNotComplete" :keiy="item.shareNum">
          <image class="w50 h50 bradius5" :src="item.avatarUrl"></image>
          <div class="information ml10 pt5">
            <div class="information-left">
              <p class="fs16 c18">{{item.nickeName}}</p>
              <p class="fs14 c78">{{item.position}}</p>
            </div>
            <div class="information-right">
              <p class="ca8 fs12">文章分享次数<span class="c38 fs12">{{item.shareNum}}</span>/{{taskdetail.shareNum}}</p>
              <p class="ca8 fs12">新增访客人数<span class="c38 fs12">{{item.visitNum}}</span>/{{taskdetail.visitNum}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="end-task" @click="end_tag">结束任务</div>
    </div>
  </div>
</template>
<script>
import WXAJAX from '../../../utils/request.js'
import tools from "@/utils/index"
export default {
  data(){
    return {
      //设置头部需要的参数
      title:'任务详情',
      navHeight: 0,
      statusBarHeight: 0,
      imgUrl:WXAJAX.imgBackUrl + '/marketing/icon_back.png',
      cardImgUrl:WXAJAX.imgBackUrl + '/marketing/img_bg_task.png',
      finishImg:WXAJAX.imgBackUrl + '/marketing/icon_finish%402x.png',
      eyeImg:WXAJAX.imgBackUrl + '/marketing/icon_eye%402x.png',
      undone:WXAJAX.imgBackUrl + '/marketing/icon_undone%402x.png',
      tabber:[
        {
          name:'未查看',
          tag:'notViewed',
          isSelect:true
        },
        {
          name:'未完成',
          tag:'incomplete',
          isSelect:false
        },
        {
          name:'已完成',
          tag:'completed',
          isSelect:false
        }
      ],
      isShow:'notViewed',
      userId:wx.getStorageSync('userId'),
      taskCustomerId:wx.getStorageSync('sharedDataId'),
      taskdetail:'',
      //员工任务状态 未查看 未完成 与 已完成
      taskNotViewed:{

      },
      taskComplete:{

      },
      taskNotComplete:{

      }
    }
  },
  watch:{
    taskdetail(newVal,old){
      this.timer(newVal)
      newVal.endTimes  = tools.getdate(newVal.endTime,'data')
      newVal.startTimes  = tools.getdate(newVal.startTime,'data')
      console.log( newVal.endTimes )
      if(newVal.state == 1){
        newVal.state = '未开始'
      }else if(newVal.state == 2){
        newVal.state = '已结束'
      }else if(newVal.state == 3){
        newVal.state = '已结束'
      }
       //需要用到endTime 所以新存一个时间
    }
  },
  created() {
    this.calculateNavBarHeight()
  },
  mounted() {
    this.getQueryMyTaskDetail()
  },
  methods:{
    //计算高度
    calculateNavBarHeight () {
      let menuButtonBounding = getApp().globalData.menuButtonBounding;
      wx.getSystemInfo({
        success: res => {
          let statusBarHeight = res.statusBarHeight; //胶囊按钮与顶部的距离
          console.log(statusBarHeight)
          let navHeight =
            statusBarHeight +
            (menuButtonBounding.top - statusBarHeight) * 2 +
            menuButtonBounding.height; //导航高度

          getApp().globalData.navHeight = navHeight;
          this.statusBarHeight = statusBarHeight
          this.navHeight = navHeight - statusBarHeight;
        },
        fail (err) {
          console.log(err);
        }
      });
    },

    getQueryMyTaskDetail(){
      wx.showLoading();
      var than = this
      WXAJAX.POST({
        type:2,
        taskCustomerId:this.taskCustomerId,
        userId:this.userId
      },'','/customerEssay/queryMyTaskDetail').then((data) =>{
        wx.hideLoading();
        if(data){
          data.time={
               day:'00',
               hour:'00',
               minute:'00',
               second:'00'
             }
          than.taskdetail = data
          console.log(than.taskdetail.myTask)
          than.taskNotViewed = than.taskdetail.myTask.filter(function(item){
              return item.viewState == 0
          })
          than.taskComplete = than.taskdetail.myTask.filter(function(item){
              return item.state == 0
          })
          than.taskNotComplete = than.taskdetail.myTask.filter(function(item){
              return item.state == 1 && item.viewState == 1
          })
          // this.getUpdateMyTaskState(this.taskdetail.userId)
        }
      })
    },
    // getUpdateMyTaskState(userId){
    //   WXAJAX.POST({
    //     taskCustomerId:this.taskCustomerId,
    //     state:'',
    //     userId:userId
    //   },'','/customerEssay/updateMyTaskState').then((data) =>{
    //     wx.hideLoading();

    //   })
    // },
    //倒计时
    timer(list){
      let than = this
      this.temp = setInterval(()=>{
          var end = list.endTime
          end = this.getDateConversion(end)
          var date = new Date()
          var now = date.getTime()
          var leftTime = end - now //时间差
          var d, h, m, s
          var date = new Date()
          var now = date.getTime()
          var end = end    //this.treasu_data 在data中定义的,后台拿到的结束时间戳
          var leftTime = end - now //时间差
          var d, h, m, s
          if (leftTime >= 0) {
          d = Math.floor(leftTime / 1000 / 60 / 60 / 24)
          h = Math.floor(leftTime/1000/60/60%24)
          m = Math.floor((leftTime / 1000 / 60) % 60)
          s = Math.floor((leftTime / 1000) % 60)
          if (d < 10) {
            d = '0' + d
          }
          if (s < 10) {
            s = '0' + s
          }
          if (m < 10) {
            m = '0' + m
          }
          if(h < 10) {
          h =  '0' + h
           }
          } else {
            // console.log('已截止')
          }
          list.time={
            day:d,
            hour:h,
            minute:m,
            second:s
          }
      },1000)
    },
    //结束任务
    end_tag(){
      var than = this
      wx.showModal({
        title:'提示',
        content:'结束后无法恢复',
        success: function (res) {
            if (res.confirm) {
                WXAJAX.POST({
                  taskCustomerId:than.taskCustomerId,
                  state:2,
                  userId:than.userId
                },'','/customerEssay/updateMyPubTaskState').then((data) =>{
                  wx.showToast({
                    title:'已结束任务',
                    duration:1000
                  })
                  setTimeout(function(){
                    wx.navigateBack({
                      delta:1
                    })
                  },1000)
                  wx.hideLoading();
                })

            } else{

            }
        }
      })
    },
    select_tag(val){

       this.tabber.forEach((item,i)=>{
        item.isSelect = false
      })
      val.isSelect = true
      this.isShow = val.tag
    },
    goBack(){
      wx.navigateBack({
        delete:1
      })
    },
    //解决ios时间格式兼容问题
    getDateConversion(data){
      let phoneSystem = ''
      wx.getSystemInfo({
        success:function(res){
          phoneSystem = res.system
        }
      });
      if(phoneSystem.indexOf("iOS") != -1){
        data = data.replace(/-/g, '/');
      }
      return Date.parse(data)
    }
  },
  destroyed() {
    wx.removeStorageSync('taskCustomerId');
    clearInterval(this.temp)
  }
};
</script>
<style scoped>
.task-details{
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
}
.share-details-top{
    background: linear-gradient(to bottom, #51cdcc, #ffffff);
 }
.share-details-title{
    display: flex;
    align-items: center;
    padding:0 100upx 0 20upx;
}
.navgation-title{
  width: 100%;
  display: flex;
  justify-content:space-around;
  font-size:36px;
}
.icon-back{
  width: 45upx;
  height: 36upx;
  margin-top: 2upx;
}
.goBack{
  width: 60upx;
  height: 100%;
  display: flex;
  align-items: center;
}
.middle{
   height: 560upx;
   width: 100%;
   box-sizing: border-box;
   padding:20upx 30upx 0upx 30upx;
   background-size: 100%;
   background-repeat:no-repeat;
   background-position:bottom;
}
.information-title{
  width: 476upx;
  word-break: break-all;
  display: -webkit-box; /**对象作为伸缩盒子模型展示**/
  -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
  -webkit-line-clamp: 2; /**显示的行数**/
  overflow: hidden; /**隐藏超出的内容**/
}
.middle-title{
  height: 88upx;
  border-radius:20upx 20upx 0upx 0upx;
  padding:0 30upx;
  background-color: #FFFFFF;
  border-bottom:1upx solid #F5F5F6;
  display: flex;
  align-items: center;
  font-size: 32upx;
  font-weight:bold;
  color: #383838;
}
/* .middle {
  display: flex;
  align-items: flex-start;
  height: 120upx;
  align-items: flex-start;
} */
.time{
    padding:30upx 30upx 30upx 34upx;
    display: flex;
    justify-content: space-between;
    min-height: 100upx;
  }
  .time-left{
    display: flex;
  }
  .dots-box{
    width: 32upx;
    height: 94upx;
    position: relative;
    margin-top: 12upx;
  }
  .dots{
    position: absolute;
    top: 0;
    z-index: 99;
    width: 32upx;
    display: flex;
    justify-content: space-between;
    text-align: center;
    flex-direction: column;
    height: 94upx;

  }
  .dots p{
     display: block;
     width: 30upx;
     height: 30upx;
     text-align: center;
     line-height: 30upx;
     border-radius: 50%;
     border:1upx solid #E8E8E8;
     color: #A8A8A8;
     font-size: 20upx;
     background-color: #FFFFFF;
  }
  .dots span{
    display: block;
    box-sizing: border-box;
    width: 16upx;
    height: 16upx;
    border-radius: 50%;
    margin:0 auto;
    background-color: #FFFFFF;
  }
  .time-line{
    width: 2upx;
    height: 90upx;
    background: #E9E9E9;
    margin: auto;
  }
  .data{
    display: flex;
    height: 115upx;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 9upx;
    font-size: 28upx;
    color: #A8A8A8;
  }
  .time-right{
    display: flex;
    height: 115upx;
    flex-direction: column;
    justify-content: space-between;
  }
  .check{
    display: flex;
    width: 170upx;
    justify-content: space-between;
    align-items: center;
  }
  .check-box{
    width: 105upx;
    height: 36upx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 6upx;
  }
  .share-records-bottom{
    background-color: #FFFFFF;
    border-radius:0 0 20upx 20upx;
    height: 88upx;
    display: flex;
    justify-content: space-between;
    padding:0 30upx;
    align-items: center;
  }
  .time-data{
    display: flex;
  }
  .share-records-bottom span{
    display: block;
    height: 40upx;
    width: 50upx;
    font-size: 28upx;
    font-weight: bold;
    background-color: #383838;
    border-radius: 10upx;
    margin:0 9upx;
    color: #FFFFFF;
    text-align: center;
    line-height: 40upx;
  }
  .share-records-bottoma{
    background-color: #FFFFFF;
    border-radius:0 0 20upx 20upx;
    height: 88upx;
    display: flex;
    justify-content: center;
    padding:0 30upx;
    align-items: center;
    color: #383838;
    font-size: 28upx;
  }
  .target{
    height: 135upx;
    padding:0upx 30upx 40upx 40upx;
  }
  .target-title{
    display: flex;
    align-items: center;
    margin-bottom: 19upx;
  }
  .target-title span{
    display: block;
    box-sizing: border-box;
    width: 16upx;
    height: 16upx;
    border-radius: 50%;
    background-color: #FFFFFF;
    border:4upx solid #2BCF88;
  }
  .target-number{
    display: flex;
    justify-content: space-between;
  }
  .number-box{
    min-width: 265upx;
    height: 50upx;
    padding:9upx 19upx 8upx 20upx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-radius: 6upx;
  }
  .target ul{
    display: flex;
    justify-content: space-around;
  }
  .target ul li{
    text-align: center;
  }
  .target-box{
    height: 30upx;
    display: flex;
    padding:0 10upx;
    align-items: center;
    border-radius: 6upx;
    margin-bottom: 20upx;
  }
  .task-finish{
    display: flex;
    padding:50upx 30upx 30upx 30upx;
  }
  .task-tabber{
    display: flex;
    flex: 1;
    padding:0 30upx;
    flex-direction: column;
  }
  .task-tabber ul{
    display: flex;
    justify-content: space-around;
    height: 88upx;
  }
  .task-tabber ul li{
    height: 100%;
    line-height: 88upx;
    position: relative;
    color: #383838;
    font-size: 28upx;
  }
  .task-tabber ul li span{
    display: block;
    height: 3upx;
    width: 100%;
    position: absolute;
    bottom: 0;
    background: #51CDCB;
  }
  .list-state{
    flex: 1;
    overflow: auto;
  }
  .list{
    height: 179upx;
    box-sizing: border-box;
    border-bottom:1upx solid #F5F5F6;
    padding:40upx 30upx 40upx 32upx;
    display: flex;
  }
  .end-task{
    height:88upx;
    border-radius: 10upx;
    text-align: center;
    line-height: 88upx;
    font-size: 36upx;
    color: #FFFFFF;
    background:linear-gradient(90deg,#41DDA1,#2BCF88)
  }
  .information{
    height: 88upx;
    display: flex;
    justify-content: space-between;
    flex: 1;
  }
  .information-left{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .information-right{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
</style>
